<template>
  <div class="biao1">
    <div class="header">
      <h1 class="header-title" style="color: #ffffff">东北农业大学电信学院管理系统</h1>
    </div>
    <div class="wrapper">
      <div class="content">
        <div class="col col-l">
          <div class="xpanel-wrapper xpanel-wrapper-40">
            <div class="xpanel xpanel-l-t Bj">
              <div class="title">学生竞赛获奖数量</div>
              <div class="xslb" id="xslb" style="width: 100%; height: 90%"></div>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-60">
            <div class="xpanel xpanel-l-b Bj">
              <div class="title">学生毕业去向分析</div>
              <div class="tu" id="tu1" style="width: 100%; height: 90%"></div>
            </div>
          </div>
        </div>
        <div class="col col-c">
          <div class="xpanel-wrapper xpanel-wrapper-100">
            <div class="xpanel xpanel-c-b Bj">
              <div class="title">教师科研成果与创新能力分析</div>
              <div class="tu" id="tu" style="width: 100%; height: 90%"></div>
            </div>
          </div>
        </div>
        <div class="col col-r">
          <div class="xpanel-wrapper xpanel-wrapper-40">
            <div class="xpanel xpanel-r-t Bj">
              <div class="title">教师结构与人才分析</div>
              <div class="xslb" id="tu7" style="width: 100%; height: 90%"></div>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-60">
            <div class="xpanel xpanel-r-m Bj">
              <div class="title">教学成果与项目分析</div>
              <div class="tu" id="tu6" style="width: 100%; height: 90%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

import { listProjects, listTextbooks, listCourses, listAchievements, listAwards, listHonors } from '@/api/index/index'

export default {
  data() {
    return {
      rawData: [],
      awardData1: [],
      awardData2: [],
      awardData3: [],
      nationalHonors: [],
      provincialHonors: [],
      schoolHonors: [],
      totalProjects: 0,
      projectsList: [],
      totalTextbooks: 0,
      textbooksList: [],
      totalCourses: 0,
      coursesList: [],
      totalAchievements: 0,
      achievementsList: [],
      totalAwards: 0,
      awardsList: [],
      totalHonors: 0,
      honorsList: [],
      loading: true,
      allProjects: [],
      allTextbooks: [],
      allCourses: [],
      allAchievements: [],
      allAwards: [],
      allHonors: [],
      awardCounts1Array: [],
      awardCounts2Array: [],
      awardCounts3Array: [],
      projectCounts_array: [],
      textbookCounts_array: [],
      courseCounts_array: [],
      achievementCounts_array: [],
      nationalHonorsArray: [],
      provincialHonorsArray: [],
      schoolHonorsArray: [],
      projectLevel: [],
      queryParamsProjects: {
        pageNum: 1,
        pageSize: 10,
        erpProjectLevel: null,
      },
      queryParamsTextbooks: {
        pageNum: 1,
        pageSize: 10,
        textbookLevel: null
      },
      queryParamsCourses: {
        pageNum: 1,
        pageSize: 10,
        courseLevel: null
      },
      queryParamsAchievements: {
        pageNum: 1,
        pageSize: 10,
        teachAwardLevel: null,
        teachAwardGrade: null
      },
      queryParamsAwards: {
        pageNum: 1,
        pageSize: 10,
        caAwardLevel: null,
        caAwardGrade: null
      },
      queryParamsHonors: {
        pageNum: 1,
        pageSize: 10,
        thHonorLevel: null
      },
      responseProjects: null,
      responseTextbooks: null,
      responseCourses: null,
      responseHonors: null,
      responseAwards: null,
      responseAchievements: null
    }
  },

  async mounted() {
    // await this.fetchData()
    var myxslb = echarts.init(document.getElementById('xslb'))
    var mytu3 = echarts.init(document.getElementById('tu'))
    var mytu4 = echarts.init(document.getElementById('tu1'))
    var mytu6 = echarts.init(document.getElementById('tu6'))
    var mytu7 = echarts.init(document.getElementById('tu7'))
    this.getList().then(({ projectCounts_array, textbookCounts_array, courseCounts_array, achievementCounts_array, awardCounts1Array, awardCounts2Array, awardCounts3Array, nationalHonorsArray, provincialHonorsArray, schoolHonorsArray, rawData, awardData1, awardData2, awardData3 }) => {
      console.log(awardCounts1Array) 
      console.log(awardCounts2Array) 
      console.log(awardCounts3Array) 
      console.log(rawData) 
      var option1 = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '8%',
          left: '4%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        legend: {
          data: ['国家级', '省级', '校级'],
          textStyle: {
            color: '#f9f9f9',
            borderColor: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0a3256',
                fontSize: 12
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#d1e6eb',
                margin: 15,
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            },
            data: ['特等奖', '一等奖', '二等奖', '三等奖', '其他']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: '#d1e6eb'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#41E1D4'
                    },
                    {
                      offset: 1,
                      color: '#10A7DB'
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
                shadowBlur: 4
              }
            },
            name: '国家级',
            type: 'bar',
            data: awardData1
          },
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#4c66ff'
                    },
                    {
                      offset: 1,
                      color: '#10A7DB'
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
                shadowBlur: 4
              }
            },
            name: '省级',
            type: 'bar',
            data: awardData2
          },
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#5485e2'
                    },
                    {
                      offset: 1,
                      color: '#10A7DB'
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
                shadowBlur: 4
              }
            },
            name: '校级',
            type: 'bar',
            data: awardData3
          }
        ]
      }
      // 教师科研成果与创新能力分析
      var option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '14%',
          left: '4%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        legend: {
          itemGap: 20,
          data: ['科研经费', '科技奖励', '论文数量', '专利 实用新型 发明', '技术转化'],
          textStyle: {
            color: '#f9f9f9',
            borderColor: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#f9f9f9'
              }
            },
            axisLabel: {
              color: '#fff',
              interval: 0,
              textStyle: {
                color: '#d1e6eb',
                margin: 15
              }
            },
            data: [
              '国家级项目',
              '省部级项目',
              '市级项目',
              '校级项目',
              '其他'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            position: 'left',
            alignTicks: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0a3256'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} 个',
              margin: 20,
              textStyle: {
                color: '#d1e6eb'
              }
            },
            axisTick: {
              show: false
            }
          },
          {
            type: 'value',
            name: '费用',
            position: 'right',
            alignTicks: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0a3256'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} 万',
              margin: 20,
              textStyle: {
                color: '#28ffb3'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '科研经费',
            yAxisIndex: 1,
            type: 'line',
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#28ffb3'
              },
              borderColor: '#f0f'
            },
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: '#28ffb3'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  0.5,
                  [
                    {
                      offset: 0,
                      color: 'rgba(0,154,120,0.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,0,0, 0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(53,142,215, 0.9)',
                shadowBlur: 20
              }
            },
            data: [5, 4, 4, 5, 5]
          },
          {
            name: '科技奖励',
            yAxisIndex: 1,
            type: 'line',
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#28ffb3'
              },
              borderColor: '#f0f'
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: '#28ffb3'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  0.5,
                  [
                    {
                      offset: 0,
                      color: 'rgba(0,154,120,0.8)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,0,0, 0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(53,142,215, 0.9)',
                shadowBlur: 20
              }
            },
            data: [3, 3, 2, 4, 3]
          },
          {
            name: '论文数量',
            yAxisIndex: 0,
            type: 'bar',
            barWidth: 15,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(249,251,4,1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(9,227,221,1)'
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowBlur: 4
              }
            },
            data: [1, 2, 2, 5, 5]
          },
          {
            name: '专利 实用新型 发明',
            yAxisIndex: 0,
            type: 'bar',
            barWidth: 15,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#41E1D4'// 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#10A7DB' // 100% 处的颜色
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
                shadowBlur: 4
              }
            },
            data: [1, 4, 5, 1, 1]
          },
          {
            name: '技术转化',
            yAxisIndex: 0,
            type: 'bar',
            barWidth: 15,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowBlur: 4
              }
            },
            data: [2, 1, 4, 5, 1]
          }
        ]
      }
      var option4 = {
        tooltip: {},
        legend: {
          bottom: '1%',
          itemWidth: 12,
          itemHeight: 12,
          data: ['就业', '升学'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '1%',
          bottom: '1%',
          containLabel: true
        },
        radar: {
          radius: '60%',
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          },
          splitLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          },
          splitArea: {
            areaStyle: {
              color: 'rgba(255,255,255,.1)',
              opacity: 1,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          indicator: [
            {
              name: '2011',
              max: 10
            },
            {
              name: '2012',
              max: 10
            },
            {
              name: '2013',
              max: 10
            },
            {
              name: '2014',
              max: 10
            },
            {
              name: '2015',
              max: 10
            },
            {
              name: '2016',
              max: 10
            },
            {
              name: '2017',
              max: 10
            },
            {
              name: '2018',
              max: 10
            },
            {
              name: '2019',
              max: 10
            },
            {
              name: '2020',
              max: 10
            },
            {
              name: '2021',
              max: 10
            },
            {
              name: '2023',
              max: 10
            },
            {
              name: '2024',
              max: 10
            }
          ]
        },
        series: [
          {
            name: '就业 vs 升学',
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,0.1)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1
              }
            },
            data: [
              {
                value: [4, 5, 2, 5, 5, 4, 5, 5, 3, 4, 5, 5, 4],
                name: '就业'
              },
              {
                value: [5, 3, 2, 5, 5, 4, 5, 5, 5, 5, 3, 2, 3],
                name: '升学'
              }
            ]
          }
        ],
        color: [
          new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              { offset: 0, color: '#4c66ff' },
              { offset: 1, color: '#5485e2' }
            ],
            false
          ),
          new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              { offset: 0, color: '#3ec2ff' },
              { offset: 1, color: '#4172ff' }
            ],
            false
          )
        ]
      }
      console.log(rawData)
      const series = [
        '教学课题数量', '教材数量', '精品课程', '教学奖'
      ].map((name, sid) => {
        return {
          name,
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          label: {
            show: true
          },

          data: rawData[sid]

        }
      })
      var option6 = {
        color: [
          '#8d7fec',
          '#fccb05',
          '#8bd46e',
          'rgb(116,255,251)'
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          selectedMode: true,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        grid: {
          left: 50,
          right: '3%',
          bottom: 100
        },
        xAxis: [
          {
            // 'name': '时段',
            type: 'category',

            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              // 坐标轴轴线相关设置
              lineStyle: {
                color: '#0a3256',
                opacity: 0.2
              }
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
              margin: 15,
              // rotate: 45,
              textStyle: {
                color: '#aaa',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            data: [
              '国家级',
              '省级',
              '校级'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            // splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0a3256'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: '#d1e6eb'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series
      }

      // 教师结构与人才分析
      const nationalTotal = nationalHonorsArray.reduce((sum, honor) => sum + honor.count, 0)
      const provincialTotal = provincialHonorsArray.reduce((sum, honor) => sum + honor.count, 0)
      const schoolTotal = schoolHonorsArray.reduce((sum, honor) => sum + honor.count, 0)

      var option7 = {
        title: {
          text: '',
          subtext: '',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 18
          }
        },
        grid: {
          top: '20%',
          left: '1%',
          right: '1%',
          bottom: '20%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            let tooltipText = `${params.name}<br/>`

            // 根据当前悬停的数据点名称获取对应的奖项数组
            let honorsArray = []
            if (params.name === '国家级' + nationalTotal + '个') {
              honorsArray = nationalHonorsArray
            } else if (params.name === '省级' + provincialTotal + '个') {
              honorsArray = provincialHonorsArray
            } else if (params.name === '校级' + schoolTotal + '个') {
              honorsArray = schoolHonorsArray
            }

            // 构建具体的奖项名称和数量信息
            tooltipText += honorsArray.map(award => {
              // 随机生成颜色
              let randomColor
              do {
                randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16)
              } while (randomColor === '#ffffff' || randomColor === '#000000') // 如果生成的是白色，重新生成
              return `<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${randomColor};margin-right:5px;'></span>${award.name}: ${award.count} 名`
            }).join('<br/>')
            return tooltipText
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '45%',
          style: {
            text: '荣誉称号\n' + (nationalTotal + provincialTotal + schoolTotal) + '个',
            textAlign: 'center',
            fill: '#FFE033',
            fontSize: 16
          }
        },
        series: [
          {
            color: ['#FF6347', 'rgb( 60,220,212)', 'rgb(244,250,  8)'],
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: '#666'
              }
            },
            name: '称号级别',
            type: 'pie',
            radius: ['65%', '85%'],
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                length: 10,
                length2: 15
              }
            },
            label: {
              normal: {
                position: 'outer',
                textStyle: {
                  color: 'rgba(255, 255, 255)'
                }
              }
            },
            data: [
              { value: nationalTotal, name: '国家级' + nationalTotal + '个' },
              { value: provincialTotal, name: '省级' + provincialTotal + '个' },
              { value: schoolTotal, name: '校级' + schoolTotal + '个' }
            ]
          }
        ]
      }
      myxslb.setOption(option1)
      mytu3.setOption(option3)
      mytu4.setOption(option4)
      mytu6.setOption(option6)
      mytu7.setOption(option7)
    })
  },
  methods: {
    // 转化数组函数
    async convertArray(originalArray) {
      const result = {}

      // 遍历原始数组，合并相同 name 的对象
      originalArray.forEach(item => {
        if (result[item.name]) {
          result[item.name] += item.count
        } else {
          result[item.name] = item.count
        }
      })

      // 将结果对象转换为数组
      return Object.keys(result).map(name => ({
        name: name,
        count: result[name]
      }))
    },

    async getList() {
      try {
        this.loading = true

        this.nationalHonors = []
        this.provincialHonors = []
        this.schoolHonors = []

        const [responseProjects, responseTextbooks, responseCourses, responseAchievements, responseAwards, responseHonors] = await Promise.all([
          listProjects(this.queryParamsProjects),
          listTextbooks(this.queryParamsTextbooks),
          listCourses(this.queryParamsCourses),
          listAchievements(this.queryParamsAchievements),
          listAwards(this.queryParamsAwards),
          listHonors(this.queryParamsHonors)
        ])

        this.projectsList = responseProjects.rows
        this.textbooksList = responseTextbooks.rows
        this.coursesList = responseCourses.rows
        this.achievementsList = responseAchievements.rows
        this.awardsList = responseAwards.rows
        this.honorsList = responseHonors.rows
        console.log(this.projectsList)
        console.log(this.textbooksList)
        console.log(this.coursesList)
        console.log(this.achievementsList)
        console.log(this.awardsList)
        console.log(this.honorsList)

        this.loading = false

        // 教学课题
        const projectCounts = {}
        const fixedProjectLevels = ['0', '1', '2']
        // 初始化固定的 courseLevels 为 0
        fixedProjectLevels.forEach(level => {
          projectCounts[level] = ' '
        })
        this.projectsList.forEach((project) => {
          const projectLevel = project.erpProjectLevel
          if (projectLevel !== null) {
            if (!projectCounts[projectLevel]) {
              projectCounts[projectLevel] = ' ' // 初始化为0
            }
            projectCounts[projectLevel]++
          }
        })

        // 教材数量
        const textbookCounts = {}
        const fixedTextbookLevels = ['0', '1', '2']
        fixedTextbookLevels.forEach(level => {
          textbookCounts[level] = ' '
        })
        this.textbooksList.forEach((textbook) => {
          const textbookLevel = textbook.teAwardLevel
          if (textbookLevel !== null) {
            if (!textbookCounts[textbookLevel]) {
              textbookCounts[textbookLevel] = ' '// 初始化为0
            }
            textbookCounts[textbookLevel]++
          }
        })

        // 精品课程
        const courseCounts = {}
        const fixedCourseLevels = ['0', '1', '2']
        // 初始化固定的 courseLevels 为 0
        fixedCourseLevels.forEach(level => {
          courseCounts[level] = ' '
        })
        this.coursesList.forEach((course) => {
          const courseLevel = course.courseLevel
          if (courseLevel !== null) {
            if (!courseCounts[courseLevel]) {
              courseCounts[courseLevel] = ' '// 初始化为0
            }
            courseCounts[courseLevel]++
          }
        })

        // 教学成果
        const achievementCounts = {}
        const fixedAchievementLevels = ['0', '1', '2']
        // 初始化固定的 courseLevels 为 0
        fixedAchievementLevels.forEach(level => {
          achievementCounts[level] = ' '
        })
        this.achievementsList.forEach((achievement) => {
          const achievementLevel = achievement.teachAwardLevel
          if (achievementLevel !== null) {
            if (!achievementCounts[achievementLevel]) {
              achievementCounts[achievementLevel] = ' '// 初始化为0
            }
            achievementCounts[achievementLevel]++
          }
        })

        // 学生竞赛
        const awardCounts1 = {}
        const awardCounts2 = {}
        const awardCounts3 = {}
        const fixedAwardGrades = ['0', '1', '2']
        fixedAwardGrades.forEach(grade => {
          awardCounts1[grade] = ' '
          awardCounts2[grade] = ' '
          awardCounts3[grade] = ' '
        })
        this.awardsList.forEach((award) => {
          const awardLevel = award.caAwardLevel
          const awardGrade = award.caAwardGrade

          if (awardLevel === '0' && awardGrade !== null) {
            awardCounts1[awardGrade]++
          } else if (awardLevel === '1' && awardGrade !== null) {
            awardCounts2[awardGrade]++
          } else if (awardLevel === '2' && awardGrade !== null) {
            awardCounts3[awardGrade]++
          }
        })

        // 教师人才称号
        this.nationalHonors = []
        this.provincialHonors = []
        this.schoolHonors = []
        this.honorsList.forEach((honor) => {
          const honorLevel = honor.thHonorLevel
          const honorName = honor.thHonorName

          if (honorLevel === '0') {
            this.nationalHonors.push({ name: honorName, count: 1 })
          } else if (honorLevel === '1') {
            this.provincialHonors.push({ name: honorName, count: 1 })
          } else if (honorLevel === '2') {
            this.schoolHonors.push({ name: honorName, count: 1 })
          } else if (honorLevel === '3') {
            this.schoolHonors.push({ name: honorName, count: 1 })
          }
        })

        // 转化为数组
        const projectCounts_array = Object.entries(projectCounts).map(
          ([projectLevel, count]) => ({ projectLevel, count })
        )
        const textbookCounts_array = Object.entries(textbookCounts).map(
          ([textbookLevel, count]) => ({ textbookLevel, count })
        )
        const courseCounts_array = Object.entries(courseCounts).map(
          ([courseLevel, count]) => ({ courseLevel, count })
        )
        const achievementCounts_array = Object.entries(achievementCounts).map(
          ([achievementLevel, count]) => ({ achievementLevel, count })
        )
        const awardCounts1Array = Object.entries(awardCounts1).map(([grade, count]) => ({ grade, count }))
        const awardCounts2Array = Object.entries(awardCounts2).map(([grade, count]) => ({ grade, count }))
        const awardCounts3Array = Object.entries(awardCounts3).map(([grade, count]) => ({ grade, count }))
        // 数组和转化

        const nationalHonorsArray = await this.convertArray(this.nationalHonors)
        const provincialHonorsArray = await this.convertArray(this.provincialHonors)
        const schoolHonorsArray = await this.convertArray(this.schoolHonors)

        // 打印
        console.log(projectCounts_array)
        console.log(textbookCounts_array)
        console.log(courseCounts_array)
        console.log(achievementCounts_array)
        console.log(awardCounts1Array)
        console.log(awardCounts2Array)
        console.log(awardCounts3Array)
        console.log(nationalHonorsArray)
        console.log(provincialHonorsArray)
        console.log(schoolHonorsArray)

        await this.updateRawData(projectCounts_array, textbookCounts_array, courseCounts_array, achievementCounts_array)
        await this.updateAwardData(awardCounts1Array, awardCounts2Array, awardCounts3Array)

        return { projectCounts_array, textbookCounts_array, courseCounts_array, achievementCounts_array, awardCounts1Array, awardCounts2Array, awardCounts3Array, nationalHonorsArray, provincialHonorsArray, schoolHonorsArray, rawData: this.rawData, awardData1: this.awardData1, awardData2: this.awardData2, awardData3: this.awardData3 }
      } catch (error) {
        console.error('Failed to api:', error)
        this.loading = false // 确保在出错时也设置 loading 为 false
      }
    },
    async updateRawData(projectCounts_array, textbookCounts_array, courseCounts_array, achievementCounts_array) {
      return (this.rawData = [
        projectCounts_array.map((item) => item.count),
        textbookCounts_array.map((item) => item.count),
        courseCounts_array.map((item) => item.count),
        achievementCounts_array.map((item) => item.count),
        console.log('this.rawData:', this.rawData)
      ])
    },
    async updateAwardData(awardCounts1Array, awardCounts2Array, awardCounts3Array) {
      this.awardData1 = awardCounts1Array.map((item) => item.count)
      this.awardData2 = awardCounts2Array.map((item) => item.count)
      this.awardData3 = awardCounts3Array.map((item) => item.count)
      console.log('this.awardData1:', this.awardData1)
      console.log('this.awardData2:', this.awardData2)
      console.log('this.awardData3:', this.awardData3)
      return { awardData1: this.awardData1, awardData2: this.awardData2, awardData3: this.awardData3 }
    }
  }
}
</script>

<style>
@charset "utf-8";

template {
  font-family: "microsoft yahei", arial, sans-serif;
  background-color: #0a0919;
  background-image: linear-gradient(#070b2a, #000);
  overflow-x: hidden;
  overflow-y: auto;
}

.biao1 {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background: url("./img/bj1.png") no-repeat;
  background-size: 100% 100%;
}

.header {
  position: relative;
  height: 42px;
  box-sizing: border-box;
}

.header-title {
  margin: 0;
  padding: 0;
  line-height: 64px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  color: #e9c29d;
  background: url("./img/ZTBJ.png") no-repeat;
  background-size: 100% 100%;
}

.wrapper {
  position: absolute;
  top: 36px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px 10px 0 10px;
  min-height: 500px;

  box-sizing: border-box;
}

.Bj {
  background: url("./img/panel-l-t.png") no-repeat;
  background-size: 100% 100%;
}

.DiTu,
.GuanxiTu1 {
  margin-right: 20px;
}

.DiTu,
.GuanxiTu {
  width: 49%;
  float: left;
  height: 100%;
}

.ZuzhuangTu {
  float: left;
  height: 100%;
  margin-right: 10px;
  width: 24.2%;
}

.ZuzhuangTu:last-child {
  margin-right: 0px;
}

.gzjg,
.jxqk,
.GuanxiTu1,
.GuanxiTu2 {
  float: left;
  width: 48%;
  height: 100%;
}

.cc1366 .ZuzhuangTu {
  float: left;
  height: 100%;
  margin-right: 10px;
  width: 24.2%;
}

.DiTu1 {
  height: 100%;
}

.ndxs {
  position: absolute;
  z-index: 1;
}

.huadong {
  height: 33rem;
  padding: 0.5rem 0 0.3rem 0;
}

.huadong .notice_active {
  float: left;
  width: 100%;
  height: 33rem;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.huadong .notice_active li {
  list-style-type: none;
  height: 33rem;
  overflow: hidden;
}

.notice_active ul {
  padding-left: 6px;
}

@media (max-width: 1919px) {
  .header {
    height: 36px;
  }

  .header-title {
    line-height: 42px;
    font-size: 22px;
  }

  .wrapper {
    top: 22px;
  }
}

@media (max-width: 1279px) {
  .wrapper {
    background: none;
  }
}

.content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 25px 15px;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.col {
  margin: 0 10px;
  height: 100%;
}

.col-l {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

.col-c {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

.col-c2 {
  -webkit-flex: 7;
  -ms-flex: 7;
  flex: 7;
}

.col-r {
  flex: 2;
}

@media (max-width: 1919px) {
  .biao2 .content {
    padding: 25px 15px;
  }

  .cc1366 .wrapper {
    min-width: 1260px;
    margin: auto;
    height: 1000px;
    top: 0px;
    bottom: 0px;
    position: relative;
  }

  .cc1366 .DiTu,
  .cc1366 .GuanxiTu {
    width: 48%;
    float: left;
    height: 100%;
  }

  .cc1366 .GuanxiTu1,
  .cc1366 .GuanxiTu2 {
    float: left;
    width: 47%;
    height: 100%;
  }
}

@media (max-width: 1279px) {
  .content {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .col {
    margin: 5px 0;
  }

  .col-l,
  .col-c,
  .col-r {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
}

.xpanel-wrapper {
  padding-bottom: 10px;
  box-sizing: border-box;
}

.xpanel-wrapper {
  height: 100%;
}

.xpanel-wrapper-25 {
  height: 25%;
}

.xpanel-wrapper-30 {
  height: 30%;
}

.xpanel-wrapper-35 {
  height: 35%;
}

.xpanel-wrapper-40 {
  height: 40%;
}

.xpanel-wrapper-45 {
  height: 45%;
}

.xpanel-wrapper-50 {
  height: 50%;
}

.xpanel-wrapper-60 {
  height: 60%;
}

.xpanel-wrapper-65 {
  height: 65%;
}

.xpanel-wrapper-70 {
  height: 70%;
}

.xpanel-wrapper-75 {
  height: 75%;
}

.xpanel {
  height: 100%;
  min-height: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.xpanel .title {
  height: 38px;
  line-height: 38px;
  font-size: 17px;
  font-weight: normal;
  color: #fff;
  background-image: url("./img/BTBJ.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0px 20%;
  text-align: center;
}

.xpanel .title-long {
  background-image: url("./img/BTBJ.png");
}

@media (max-width: 1920px) {
  .cc1366 .ZuzhuangTu {
    float: left;
    height: 100%;
    margin-right: 10px;
    width: 24.2%;
  }
}

@media (max-width: 1900px) {
  .xpanel .title {
    padding-left: 20px;
    height: 36px;
    line-height: 36px;
    font-size: 20px;
  }

  .cc1366 .ZuzhuangTu {
    float: left;
    height: 100%;
    margin-right: 10px;
    width: 23.54%;
  }
}

.fill-h {
  height: 100% !important;
  min-height: 100% !important;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-bg {
  background: none !important;
}

.no-border {
  border: 0 !important;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 1260px) {
  .header-title {
    width: 1260px;
    margin: auto;
  }

  .biao1 .header-title {
    width: 100%;
  }

  .content {
    display: block;
  }

  .cc1366 .xpanel-wrapper {
    width: 100%;
  }

  .cc1366 .DiTu,
  .cc1366 .GuanxiTu {
    width: 100%;
    float: left;
    height: 550px;
  }

  .cc1366 .col-c2,
  .cc1366 .col-l {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .cc1366 .DiTu,
  .cc1366 .GuanxiTu {
    margin-bottom: 20px;
  }

  .cc1366 .GuanxiTu1,
  .cc1366 .GuanxiTu2 {
    width: 48%;
  }

  .cc1366 .ZuzhuangTu {
    width: 23.8%;
  }
}
</style>
